<template>
    <div class="FirstPage">
        <el-row :gutter="20">
            <el-col :xs="22" :sm="22" :md="22" :lg="22" :xl="22" :offset="1" align="center">
                <div style="padding-bottom: 30px;font-size: xx-large;font-weight: bolder">
                    WeCtrls
                </div>
                <div style="padding-bottom: 20px;font-size: larger;">Welcome to use WeCtrls Please login or register
                    first
                </div>
            </el-col>
            <el-col :xs="22" :sm="22" :md="22" :lg="22" :xl="22" :offset="1" align="center">
                <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card" stretch>
                    <el-tab-pane name="loginTab">
                        <span slot="label">登录</span>
                        <template v-if="activeName==='loginTab'">
                            <login></login>
                        </template>
                    </el-tab-pane>
                    <el-tab-pane name="registerTab">
                        <span slot="label">注册</span>
                        <template v-if="activeName==='registerTab'">
                            <register @reLoadActive="change"></register>
                        </template>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import Login from "./Login";
    import Register from "./Register";

    export default {
        name: "FirstPage",
        components: {Register, Login},
        data() {
            return {
                activeName: "loginTab"
            }
        },
        methods: {
            change(data) {
                //子组件传值控制激活的
                this.activeName = data;
                // this.$router.push("/first?t=" + Date.now())
            },
            handleClick() {

            }
        }
    }
</script>

<style scoped>

    .FirstPage {
        padding-top: 10%;
    }
</style>